<template>
	<view class="content">
		<navbar title='题目搜索'>
		</navbar>
		<u-sticky offset-top="0">
			<view class="souview">
				<view class="souitem">
					<image class="icon_sousuo" src="@/static/new/icon_sousuo.png"></image>
					<u-input placeholder="关键词搜索" :clearable="true" :border="false" v-model="name"></u-input>
					<view class="soubtn" @click="getsou">搜索</view>
				</view>
			</view>
		</u-sticky>
		<view class="lsou" v-if="!issou&&newhistoryList!=''">
			<view class="lihead">
				<text class="liname">历史搜索</text>
				<u-icon class="delicon" name="trash" color="#666" size="32" @click="del"></u-icon>
			</view>
			<view class="lishilist">
				<view class="liitem" v-for="(item,index) in newhistoryList" :key="index" @click="getnav(item)">{{ item.keywords }}</view>
			</view>
		</view>
		<view v-if="list!=''&&issou" class="newsouitem" v-for="(item,index) in list" :key="index">
			<view class="souitemone">
				<text class="faname">{{ item.topic }}</text>
				<text class="lei">{{ item.type_name }}</text>
			</view>
			<text class="newname">{{item.difficulty_name}}</text>
			<view class="tithree">
				<view class="items" :class="i.correct==1?'dui':''" v-for="(i,ind) in item.answer" :key="ind">
					<image class="duigou" src="@/static/new/duis.png"></image>
					<image class="icon_cw" src="@/static/new/icon_cw.png"></image>
					<text class="xname">{{ i.option+'.'+i.answer }}</text>
					
				</view>
				<!-- <view class="items cuo">
					<image class="icon_cw" src="@/static/new/icon_cw.png"></image>
					<text class="xname">B.答案2</text>
				</view>
				<view class="items">
					<text class="xname">C.答案2</text>
				</view>
				<view class="items">
					<text class="xname">D.答案2</text>
				</view> -->
			</view>
			<view class="xuojie" v-if="item.analysis">
				<text class="jietit">答题解析：</text>
				<view class="jiemiao">
					{{item.analysis}}
				</view>
			</view>
		</view>
		<view class="nodata" style="width: auto;" v-if="list == ''">
			<u-empty text="暂无数据" mode="list" ></u-empty>
		</view>
		<!-- <view class="botview">
			<view class="bottwoview">
				<view class="tibview tactive">题目1</view>
				<view class="tibview">上一题</view>
				<view class="tibview">下一题</view>
				<view class="tibview del">删除</view>
				<view class="tibview">清空</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle:{
					fontWeight: 'bold',
					fontSize: '36rpx',
					color: '#111111',
				},
				value:'',
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				name:'',
				issou:false,
				newhistoryList: [], //历史记录列表
			}
		},
		onLoad() {
			// this.getList()
			this.newhistoryList = uni.getStorageSync('newhistoryList');
		},
		onShow() {
		},
		methods: {
			async getList(){//列表数据
				let res = await this.$u.api.topiclist({
					limit:this.limit,
				  	page:this.page,
					name:this.name
				});
				// console.log(res)
				this.uinfo = res
				this.last_page = res.list.last_page;
				let list = res.list.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				let data = this.list
				// for(let i in data){
				// 	for(let j in data[i].correct_answer_array){
				// 		if(data[i].correct_answer_array[j]==data[i].)
				// 	}
				// }
				if(this.page >= this.last_page){
				  this.status = 'nomore';
				}
				
			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getDetail(){
				this.navrouter("/pages/StudPage/Detail");
			},
			getsou(){
				this.setHistory(this.name);
				this.getClear()
			},
			getClear(){
				this.issou = true
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			 // 存储历史数据
			 setHistory(text) {
                // this.setSearch(text);
                // this.loadData(); //重新加载热门搜索
                if(text == ''){
                    return false;
                }
                let newhistoryList = uni.getStorageSync('newhistoryList');
                this.newhistoryList = [];
                this.newhistoryList = newhistoryList; //重新加载历史记录
                let searchHistory = newhistoryList;
                if (!searchHistory) searchHistory = [];
                let serachData = {};
                if (typeof text === 'string') {
                    serachData = { keywords: text };
                } else {
                    serachData = text;
                }
                // 判断数组是否存在，如果存在，那么将放到最前面
                for (var i = 0; i < searchHistory.length; i++) {
                    if (searchHistory[i].keywords === serachData.keywords) {
                        searchHistory.splice(i, 1);
                        break;
                    }
                }
                searchHistory.unshift(serachData);
                uni.setStorage({
                    key: 'newhistoryList',
                    data: searchHistory
                });
                // console.log(uni.getStorageSync('newhistoryList'))
            },
            del(){
                let newhistoryList = []
                // newhistoryList.splice(index,1)
                uni.setStorage({
                    key: 'newhistoryList',
                    data: newhistoryList
                });
                this.newhistoryList = newhistoryList
            },
			getnav(item){
				this.name = item.keywords
				this.setHistory(item.keywords);
				this.getClear()
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 150rpx;
		.souview{
			background-color: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.souitem{
				height: 78rpx;
				background: #F5F5F5;
				border-radius: 39rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				padding: 0 23rpx;
				width: 100%;
				.icon_sousuo{
					width: 24rpx;
					height: 24rpx;
					margin-right: 15rpx;
				}
				.soubtn{
					margin-left: 20rpx;
					width: 100rpx;
					height: 50rpx;
					background: #3E65E5;
					border-radius: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
		.newsouitem{
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx 30rpx 0;
			
		}
		.lsou{
			padding:50rpx 40rpx;
			.lihead{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 30rpx;
				.liname{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					// display: block;
					
				}
				.delicon{
					margin-left: auto;
				}
			}
			.lishilist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.liitem{
					padding: 10rpx 20rpx;
					background-color: #d2d2d2;
					color: #666;
					border-radius: 20rpx;
					margin: 0 20rpx 20rpx 0;
				}
			}
		}
		.souitemone{
			padding: 25rpx 30rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 28rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.faname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 33rpx;
				color: #333333;
				display: inline-block;
				max-width: 80%;
			}
			.lei{
				background: #EAEFFF;
				border-radius: 5rpx;
				margin-left: 30rpx;
				padding: 10rpx 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #3E65E5;
			}
		}
		.kaoione{
			height: 80rpx;
			margin: 30rpx
			 30rpx 30rpx;
			background: #EAFFEC;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon_sj{
				margin-right: 7rpx;
				height: 40rpx;
				width: 40rpx;
			}
			.daojishi{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #1AA313;
			}
			
		}
		.newname{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			display: block;
			margin:0 30rpx 50rpx;
		}
		.kaotwo{
			padding: 30rpx;
			.danone{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 24rpx;
				.danti{
					width: 120rpx;
					height: 44rpx;
					background: #EAEFFF;
					border-radius: 5rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #3E65E5;
				}
				.icon_sc_n{
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
				.tinum{
					margin-left: auto;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.tname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-bottom: 50rpx;
				display: block;
			}
		}
		.tione{
			margin: 30rpx;
			.img_ks{
				width: 100%;
				height: 400rpx;
			}
			.xuan{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
				.xuanitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 33.33%;
					justify-content: center;
					.xuanicon{
						width: 44rpx;
						height: 44rpx;
						margin-right: 7rpx;
					}
					text{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
				}
			}
		}

		.line{
			height: 20rpx;
			background: #EEEEEE;
			width: 100%;
		}
		.titwo{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 30rpx;
			.xitem{
				background: #EEEEEE;
				border-radius: 10rpx;
				padding:15rpx 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #51565D;
				margin-right: 20rpx;
			}
			.xactive{
				background: #F0FCF5;
				border: 1px solid #46DB7A;
			}
		}
		.tithree{
			margin: 0 30rpx 30rpx;
			.items{
				height: 90rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				.xname{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.tiname{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					color: #999999;
					display: inline-block;
					margin-left: auto;
				}
				.duigou{
					width: 44rpx;
					height: 44rpx;
					// margin-left: auto;
					display: none;
					margin-right: 20rpx;
				}
				.icon_cw{
					width: 44rpx;
					height: 44rpx;
					// margin-left: auto;
					display: none;
					margin-right: 20rpx;
					
				}
			}
			.active{
				.duigou{
					display: inline-block;
				}
				background: #EAEFFF;
				.xname{
					color: #3E65E5;
				}
				.tiname{
					color: #3E65E5;
				}
			}
			.dui{
				background: #F0FCF5;
				border-radius: 10rpx;
				border: 1rpx solid #46DB7A;
				// .xname{
				// 	color: #3E65E5;
				// }
				.duigou{
					display: inline-block;
				}
			}
			.cuo{
				background: #FFF2F2;
				border-radius: 10rpx;
				border: 1rpx solid #FF6159;
				.icon_cw{
					display: inline-block;
				}
			}
		}
	}
	.botview{
		position: fixed;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		bottom: 0;
		// padding: 0 60rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		justify-content: space-around;
		.bottwoview{
			display: flex;
			width: 92%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			
		}
		.tibview{
			height: 85rpx;
			border-radius: 10rpx;
			border: 1px solid #3E65E5;
			margin: 0 12rpx;
			width: 160rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #3E65E5;
		}
		.tactive{
			background: #3E65E5;
			color: #fff;
		}
		.del{
			border: 1px solid #DB372E;
			color: #FF6159;
		}
		.kaihui{
			width: 90%;
			margin: 0 auto;
			height: 78rpx;
			background: #3E65E5;
			border-radius: 20rpx;
			display: flex;
			margin-left: auto;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.cline{
		height: 20rpx;
		background: #EEEEEE;
		position: relative;
	}
	.xuojie{
		padding: 30rpx;
		.jietit{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			display: block;
			margin-bottom: 20rpx;
		}
		.jiemiao{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
		}
	}

</style>
<style>
/deep/.uv-count-down__text{
	font-weight: 500;
	font-size: 32rpx;
	color: #1AA313;
}
</style>